<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有人智造-经营驾驶舱</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
    <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
    <style>
        .body{
            width: 100%;
            /*height: 1100px;*/
            height: 100%;
            /*background-color: #f5f7fa;*/
            font-size: 25px;
            background: linear-gradient(to bottom right, blue, pink);
            background-image: url("/static/img/017d6a5c513b9ca801213f26c6f65d.png@2o.png");
            background-size: cover;
        }
        h3{
            border-radius: 20px 20px 0 0;
            padding-left: 20px;
        }
        h1{
            width: 30%;
            margin: 0 auto;
            color: white;
            background: linear-gradient(-45deg, transparent 34px, #134194 0) right,
            linear-gradient(45deg, transparent 34px, #134194 0) left;
            background-size: 50% 100%;
            background-repeat: no-repeat;
            margin-bottom: 20px;
        }
        table th:nth-child(odd){
            background-color: #2bb9ba;
            color: white;
        }
        table th:nth-child(even){
            background-color:#134094;
            color: white;
        }
        table tr:nth-child(odd){
            background-color: #7DC4CC;
            color: white;
        }

        .table1 tr th{
            padding: 0;
            text-align: center;
        }
        .table1 tr td{
            padding: 0;
        }
        .main1{
            width: 100%;
            height: 850px;
            background-color: #7bd4ce;
        }
        .container {
            max-width: 2500px;
            width: 100%;
            /*width: 1510px;*/
            /*margin: 0 auto;*/
            display: inline-block;
            padding: 0;
            /*background-color: red;*/
            height: 820px; /* 设置容器的高度 */
            overflow: auto; /* 启用垂直滚动 */
            /*margin-left: 70px;*/
            overflow-y: hidden;
            overflow-x: hidden;
            position: relative; /* 相对定位以容纳滚动内容 */
            /*display: flex;*/
            /*float: left;*/

        }
        .container1{
            width: 100%;
            /*width: 1800px;*/
            /*background-color: #666aff;*/
            position: absolute; /* 绝对定位 */
            top: 0; /* 初始位置为顶部 */
            /*animation: move 5s linear infinite; !* 使用动画滚动 *!*/
            animation-name: move;
            /*animation-duration: 800s;*/
            animation-timing-function: linear;
            /*animation-delay: 1s;*/
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }
        /* 滚动动画 */
        @keyframes move {
            /*0% {*/
            /*    top: 0; !* 开始时回到顶部 *!*/
            /*}*/
            /*100% {*/
            /*    top: -100%; !* 结束时滚动到底部 *!*/
            /*}*/
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(-10%);
            }
        }
        .return{
            position: fixed;
            top: 10px;
            left:10px;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body class="body">
<div class="main" >
    <img src="/static/img/return.png" alt="返回主页" class="return">
    <h1 style="text-align: center ">经营驾驶舱</h1>
    <div class="main">
        <div class="main1">
            <table class="table table1" style="margin-bottom: -3px">
                <tr style="text-align: center;">
                    <th width="40px" style="padding: 0;font-size: 20px">序号</th>
                    <th width="150px">生产订单编号</th>
                    <th width="200px">单据号</th>
                    <th width="150px">物料料号</th>
                    <th width="150px">检验结果</th>
                    <th width="350px">检验周期</th>
                </tr>
            </table>
            <div class="{if $count>=22}container{/if}">
                <div class="{if $count>=22}container1{/if}" style="animation-duration:{$count/10}s;">
                    <table class="table table1">
                        {foreach $data as $k=>$v}
                        <tr style="text-align: center ;">
                            <td width="40px" style="font-size: 20px;padding: 0">{$k+1}</td>
                            <td width="150px">{$v['PROJECT_NO']}</td>
                            <td width="200px">{$v['DOC_NO']}</td>
                            <td width="150px">{:$v['ITEM_CODE']}</td>
                            <td width="150px">{$v['TEST_RESULT']}</td>
                            <td width="350px" style="font-size: 15px">{$v['TEST_START_TIME']}~{$v['TEST_END_TIME']}</td>
                        </tr>
                        {/foreach}
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(".return").click(function (){
        window.history.back();
    })
</script>
</html>